<!--复选框-->
<template>
  <div class="example">
    <zz-nav
      :is-bottom="true"
      :data="test"
      label="test"
      :isBig=false
    ></zz-nav>

    <zz-nav
      :is-bottom="true"
      :data="nav"
    ></zz-nav>

    <zz-nav
      :is-bottom="true"
      :data="nav"
      :isBig=false
      :isSmall="true"
    ></zz-nav>

    <zz-nav
      :is-bottom="true"
      :data="nav"
    ></zz-nav>

    <zz-nav
      class="mt20 mb20"
      :isButtonStyle="true"
      :data="nav"
      :padding="[0, 0, 0, 0]"
      :isBlock = true
      :isBig=false>
      <zz-search slot="right"></zz-search>

    </zz-nav>
    <div class=" tableClass">
      <table cellspacing="0">
        <tr>
          <th>1) 调用文件组件</th>
        </tr>
        <tr>
          <td><pre>{{explameCall}}</pre></td>
        </tr>
        <tr>
          <th>2) 写入到methods方法</th>
        </tr>
        <tr>
          <td><pre>{{explameMethods}}</pre></td>
        </tr>
        <tr>
          <td><pre>{{state}}</pre></td>
        </tr>
        <tr>
          <td><pre>{{this.stateData}}{{valueData}}</pre></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>

  export default {
    name: '',
    data () {
      return {
        test: [
          {test: '导航1', hover: true},
          {test: '导航2', hover: false}
        ],
        nav: [
          {name: '导航1', hover: true},
          {name: '导航2', hover: false}
        ],
        state: '',
        stateData: '',
        valueData: {id: 1},
        checkEd: true,
        explameCall: `<zz-nav
          data="[
            {test: '导航1', hover: true},
            {test: '导航2', hover: false}
          ]"  需要显示的数据
          :isRoute="false"  是否启用vue 的路由 (需要在data加上路由名字，下有栗子)
          :isSmall = false 是否启用小字模式 中间有竖线， 字体12px
          :isBig = false 是否启用大字模式
          :isBlock = false 是否启用块状模型 上有栗子
          :isBottom = false 是否显示下边线
          :padding = [20, 20, 20, 20] 自定义边距
          fontSize = "14px"  字体大小
          fontWeight = "normal" 字体加粗样式
          paddingBottom = '18px' 内部a标签的下边距
          :isMenu = false 是否获取拥有权限的菜单
          :isChildMenu = false 是否获取拥有权限的子菜单
          @handle="handleChange" 选择后回调事件
          ></zz-nav>`,

        explameMethods:
          `handleChange (state) {
            this.state = state
            console.log(this.state)
          },
          handleChangeData (data) {
            let {state, value} = data
            console.log(state, value)
          }`
      }
    },
    methods: {
      handleChange (state) {
        this.state = state
      },
      handleChangeData (data) {
        let {state, value} = data
        this.stateData = state
        this.valueData = value
      }
    }
  }
</script>
<style lang="scss" scoped>
  .example{
    padding: 20px;
    .example-left{
      float: left;
      width: 35%;
    }
    .example-right{
      float: right;
      width: 60%;
      background: #fff;
      padding: 20px;
    }
  }
</style>
